<template>
  <div class="steps">
    <div
      class="steps-item"
      v-for="(item, index) in data"
      @click="handleClick(item, index)"
      :class="{ 'steps-item--complete': item.isSelect }"
    >
      <!-- <div class="select" v-if="item.isSelect">√</div> -->
      <div class="icon">
        <template v-if="item.isSelect">
          <el-icon><SuccessFilled /></el-icon>
        </template>
        <el-icon class="is-loading" v-else><Loading /></el-icon>
      </div>
      <div class="title">{{ item.title }}</div>
    </div>
  </div>
</template>
<script setup>
const emit = defineEmits(['click'])
const props = defineProps({
  active: String,
  data: Array,
  message: Object,
})

const handleClick = (item, index) => {
  console.log('item, index', item, index + 1)
  emit('click', {
    message: props.message,
    steps: item,
    index: index + 1,
  })
}
</script>
<style lang="scss" scoped>
.steps {
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  background-color: #fff;
}
.steps-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e6eb;
  cursor: pointer;
  &:hover {
    background-color: #ecf5ff;
  }
  &:last-child {
    border-bottom: none;
  }

  .icon {
    margin-right: 8px;
  }
}

.steps-item--complete {
  .icon {
    color: #67c23a;
  }
}
</style>
